<template>
    <div class="column">
        <router-view/>
        <div class="panelLabel">
            <h1>{{ year }}年全市总计：</h1>
            <h1>{{ month }}月当月&nbsp;</h1>
            <h3 class="h7">{{ qsd }} 亿元&nbsp; &nbsp; </h3>
            <h1>{{ month }}月累计&nbsp;</h1>
            <h3>{{ qsl }} 亿元&nbsp; &nbsp; </h3>
            <div class="panelLabel-foot"></div>
        </div>
        <div class="panelSmLong">
            <div class="boxb2"><h2>{{ year }}年{{ month }}月分区镇规上工业总产值</h2></div>
            <div class="panelSmLong1">
                <v-chart class="chart" :option="option1" :autoresize="true" @click="echartsClick1"></v-chart>
            </div>
            <div class="panelSmLonggy-foot"></div>
        </div>
        <div class="panelSmLong">
            <div class="boxb1"><h2>{{ year }}年{{ month }}月分区镇规上工业总产值同比增速排名</h2></div>
            <div class="panelSmLong1">
                <v-chart class="chart" :option="option2" :autoresize="true" @click="echartsClick1"></v-chart>
            </div>
            <div class="panelSmLonggy1-foot"></div>
        </div>
        <area-tips v-if="tipsShow"
                   @closeTips="closeTips"
        :dian_shan_hu="dian_shan_hu"
        :jin_xi="jin_xi"
        :zhou_zhuang="zhou_zhuang"></area-tips>
    </div>
</template>

<script>
import l1 from '../css/images/l1.png';
import l2 from '../css/images/l2.png';
import l3 from '../css/images/l3.png';
import * as echarts from "echarts";
import AreaTips from "@/components/area-tips.vue";

export default {
    name: "my1",
    components: {AreaTips},
    computed: {
        year() {
            return this.$store.year
        },
        month() {
            return this.$store.month
        }
    },
    watch: {
        '$store.time': {
            immediate: true,
            deep: true,
            handler(v) {
                this.getdata1();
            }
        }
    },
    methods: {
        echartsClick1(params) {
            if (params.name == `旅游度假区`) {
                this.tipsShow = true
            }
        },
        closeTips() {
            this.tipsShow = false
        },
        getdata1() {
            this.$util.http.get('/industrialIndicators/getSubDistrictTownIndustry?year=' + this.year + '&&month=' + this.month)
                .then(res => {
                    this.option1.legend.data[0].name = this.month + '' + "月当月总产值"
                    this.option1.series[0].name = this.month + '' + "月当月总产值"

                    this.option1.legend.data[1].name = this.month + '' + "月累计总产值"
                    this.option1.series[1].name = this.month + '' + "月累计总产值"
                    if (res.data.code !== 200) {
                        this.option1.series[0].data = [0, 0, 0, 0, 0, 0, 0, 0, 0]
                        this.option1.series[1].data = [0, 0, 0, 0, 0, 0, 0, 0, 0]
                        this.option2.series[0].data = [0, 0, 0, 0, 0, 0, 0, 0, 0]
                        return;
                    }
                    this.zhou_zhuang = res.data.data.zhou_zhuang
                    this.jin_xi = res.data.data.jin_xi
                    this.dian_shan_hu = res.data.data.dian_shan_hu
                    this.qsd = res.data.data.total.thisMonth.toFixed(2)
                    this.qsl = res.data.data.total.accumulate.toFixed(2)
                    // 填充数据
                    for (var i = 0; i < res.data.data.fiexedList.length; i++) {
                        this.data1[i] = res.data.data.fiexedList[i].thisMonth.toFixed(2)
                        this.data2[i] = res.data.data.fiexedList[i].accumulate.toFixed(2)
                        this.data3[i] = res.data.data.sortedList[i].monthOnMonth.toFixed(1)
                        // 地点
                        this.area1[i] = res.data.data.fiexedList[i].indicators
                        this.area2[i] = res.data.data.sortedList[i].indicators
                    }
                    this.option1.series[0].data = this.data1
                    this.option1.series[1].data = this.data2
                    this.option2.series[0].data = this.data3

                    // 地点
                    this.option1.xAxis.data = this.area1
                    this.option2.xAxis.data = this.area2

                })
        },
    },

    data() {
        return {
            tipsShow: false,
            zhou_zhuang: {}, //周庄镇
            jin_xi: {}, //锦溪镇
            dian_shan_hu: {}, //淀山湖镇
            data1: [0, 0, 0, 0, 0, 0, 0, 0, 0],
            data2: [0, 0, 0, 0, 0, 0, 0, 0, 0],
            data3: [0, 0, 0, 0, 0, 0, 0, 0, 0],
            // data4:[0,0,0,0,0,0,0,0,0,0,0,0],
            area1: ['昆山开发区', '昆山高新区', '花桥经济开发区',
                    '旅游度假区','张浦镇', '周市镇',
                    '陆家镇', '巴城镇', '千灯镇'],
            area2: ['昆山开发区', '昆山高新区', '花桥经济开发区',
                '旅游度假区','张浦镇', '周市镇',
                '陆家镇', '巴城镇', '千灯镇'],
            qsd: '-',
            qsl: '-',

            option1: {
                tooltip: {
                    backgroundColor: "#00194A",
                    trigger: 'axis',
                    textStyle: {
                        fontSize: 15,
                        color: "#fff",
                    },
                    formatter: ((params) => {
                        var render = `<div style="font-size:15px;">${params[0].axisValue}</div>
                              <div style="font-size:16px;margin-top:5px;">
                                <p style="display: inline;color: #87CEEB;font-size: 15px;">当月：</p>
                                <p style="display: inline;color: rgba(18, 224, 254, 1);font-size: 18px;">${this.data1[params[0].dataIndex]}</p>
                                <p style="display: inline;color: rgba(18, 224, 254, 1);font-size: 14px; ">亿元</p>
                              </div>
                              <div style="font-size:16px;margin-top:5px;">
                                <p style="display: inline;color: #87CEEB;font-size: 15px;">累计</p>
                                <p style="display: inline;color: lawngreen;font-size: 18px;">${this.data2[params[0].dataIndex]}</p>
                                <p style="display: inline;color: lawngreen;font-size: 14px; ">亿元</p>
                              </div>
                                `;
                        if (params[0].axisValue == "旅游度假区") {
                            render += `

                            `
                        }
                        return render;
                    })
                },
                legend: {
                    orient: 'horizontal',
                    right: '12.5%',

                    textStyle: {
                        color: '#A1D5FF',
                        fontSize: 16,
                    },
                    data: [{
                        name: '8月当月总产值',
                        icon: ('image://' + l1 + '')
                    }, {
                        name: '8月累计总产值',
                        icon: ('image://' + l2 + '')
                    }],

                },
                grid: {
                    top: '20%',
                    left: '5%',
                    right: '1%',
                    bottom: '3%',
                    show: true,
                    borderColor: "#012f4a",
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    // boundaryGap: false,
                    data: ['昆山开发区', '昆山高新区', '花桥经济开发区',
                            '旅游度假区', '张浦镇', '周市镇',
                            '陆家镇', '巴城镇', '千灯镇'],
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#97C9FF',
                            fontSize: 12
                        },
                        margin: 10, // 刻度标签与轴线之间的距离。
                    },
                    axisLine: {
                        show: true
                    }
                },
                yAxis: {
                    name: '(亿元)',
                    nameTextStyle: {
                        color: '#97C9FF',
                        fontSize: 10,
                    },
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        // margin: 30,
                        textStyle: {
                            color: '#97C9FF',
                            fontSize: 16,
                        },
                        color: '#4c9bfd',
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            opacity: 0.5
                        }
                    },
                },
                series: [
                    //data1传入当月值
                    {
                        name: '8月当月总产值',
                        type: 'bar',
                        label: {
                            show: true,
                            fontSize: 16,
                            color: 'rgba(8, 84, 233, 1)',
                            position: 'top', //在上方显示
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [{
                                            offset: 1,
                                            color: '#01BEC7'
                                        },
                                            {
                                                offset: 0,
                                                color: 'rgba(8, 84, 233, 1)'
                                            }
                                        ]
                                    )
                                },
                                opacity: 1
                            }
                        },
                        data: this.data1,
                    },
                    //data2传入 当月和累计的总和
                    {
                        name: '8月累计总产值',
                        type: 'bar',
                        label: {
                            show: true,
                            fontSize: 16,
                            color: '#3D9140',
                            position: 'top', //在上方显示
                        },
                        itemStyle: {
                            color: function (params) {
                                return new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [{
                                        offset: 0,
                                        color: '#3D9140'
                                    },
                                        {
                                            offset: 1,
                                            color: 'rgba(102,214,131, 1)'
                                        }
                                    ]
                                )
                            }
                        },
                        data: this.data2,
                    }

                ]
            },

            option2: {
                tooltip: {

                    trigger: 'item',
                },
                grid: {
                    top: '20%',
                    left: '5%',
                    right: '1.5%',
                    bottom: '3%',
                    show: true,
                    borderColor: "#012f4a",
                    containLabel: true
                },
                legend: {
                    orient: 'horizontal',
                    right: '12.5%',
                    data: [{
                        name: '同比+',
                        icon: ('image://' + l3 + ''),
                        textStyle: {
                            color: 'orange',
                            fontSize: 16
                        }
                    }, {
                        name: '同比-',
                        icon: ('image://' + l2 + ''),
                        textStyle: {
                            color: '#43CD80',
                            fontSize: 16
                        }
                    },]
                },
                xAxis: {
                    data: ['昆山开发区', '昆山高新区', '花桥经济开发区',
                        '旅游度假区', '张浦镇', '周市镇',
                        '陆家镇', '巴城镇', '千灯镇'],
                    show: true,
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#97C9FF',
                            fontSize: 12
                        },
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: 'gray',
                            opacity: 1
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    boundaryGap: true,
                    splitLine: {
                        show: false,
                        width: 0.08,
                        lineStyle: {
                            type: "solid",
                            color: "#03202E"
                        }
                    }
                },
                yAxis: [{
                    name: '(%)',
                    nameTextStyle: {
                        align: 'left',
                        color: '#97C9FF',
                        padding: [0, 0, 0, -25],
                        fontSize: 10,
                    },
                    //背景网格为虚线
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            opacity: 0.5
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#97C9FF',
                            fontSize: 16,
                        }
                    }
                },
                ],
                series: [
                    {
                        name: '同比',
                        type: 'bar',
                        barWidth: 25,
                        barGap: '-100%',
                        data: this.data3,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    if (params.value >= 0) {
                                        return 'orange';
                                    } else {
                                        return '#43CD80';
                                    }
                                }
                            }
                        }
                    },
                    {
                        name: '同比+',
                        type: 'bar',
                        barWidth: 25,
                        barGap: '-100%',
                    },
                    {
                        name: '同比-',
                        type: 'bar',
                        barWidth: 25,
                        barGap: '-100%',
                    },
                ]
            },
        }
    }
}
</script>

<style scoped>

</style>